<script setup lang="ts">
import {computed, PropType, ref, toRaw, watch} from "vue";
import {dataInterface, CoverImgAndNameInterface} from "@/main_views/discover_children_views/Recommend.vue";
import {useStore} from "@/store";

const store = useStore();
const props = defineProps({
  data: {
    type: [Array, Number] as PropType<dataInterface[]>,
    required: true,
  },
  name: {
    type: String,
    required: true,
  },
});
const list = computed(() => store.state.global.list);
const neededList = ref({} as unknown as CoverImgAndNameInterface);
watch(list, (newValue: CoverImgAndNameInterface[]) => {
  neededList.value = toRaw(newValue).filter(item => item.name === props.name)[0];
});
</script>
<template>
  <dl>
    <dt class="top_c">
      <img v-lazy="{src:neededList.coverImgUrl??''}">
      <div class="top_right">
        <h3>{{ neededList.name ?? "加载中" }}</h3>
        <div>
          <svg class="icon icon_top" aria-hidden="true">
            <use xlink:href="#icon-bofang"></use>
          </svg>
          <svg class="icon icon_top" aria-hidden="true">
            <use xlink:href="#icon-shoucangjia"></use>
          </svg>
        </div>
      </div>
    </dt>
    <dd>
      <ul>
        <li v-for="(item,index) of data"
            :key="item.id"
            :class="{background_li:index%2===0}">
          <span :class="{index_top:index<=2,index:index>2}">{{ index + 1 }}</span>
          <span class="name">{{ item.name }}</span>
          <div class="item_right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bofang"></use>
            </svg>
            <svg class="icon play_icon" aria-hidden="true">
              <use xlink:href="#icon-tian_jia"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shoucangjia"></use>
            </svg>
          </div>
        </li>
      </ul>
    </dd>
  </dl>
</template>
<style scoped lang="scss">
dl {
  width: 230px;
  border: 1px solid #bdc3c7;
  margin: -1px -1px -1px -1px;

  .top_c {
    display: grid;
    width: 230px;
    height: 120px;
    grid-template-columns: 45% 55%;

    img {
      align-self: center;
      justify-self: center;
      height: 80px;
      width: 80px;
    }

    .top_right {
      align-self: center;

      .icon_top {
        font-size: 1.3em;
        margin-right: 15px;
        cursor: pointer;
      }
    }
  }

  dd {
    ul {
      li {
        height: 32px;
        line-height: 32px;
        display: grid;
        grid-template-columns:15% 55% 35%;

        .index, .index_top {
          justify-self: center;
        }

        .index_top {
          color: #B2281E;
        }

        .item_right {
          display: none;

          .icon {
            margin-right: 5px;
            cursor: pointer;
          }
        }

        span {
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        &:hover {
          .item_right {
            display: block;
          }
        }
      }

      .background_li {
        background-color: #bdc3c7;
      }
    }
  }
}
</style>
